/**
 *@author：yc
 *@pramas: 
  * "imgsAttrName",Object,图片的属性命名，用于上传后台服务的图片分类命名.输入格式：{clazz:'xxx',columnName:'xxx'}
  * "itemAttr"，String,图片所属的物品类别
  * "importFileUrl",String,上传图片的后台服务地址，默认是通用后台地址
  * "isMultImgs",Boolean,是否禁用，非必填默认false
	*@return:response-handler方法，返回图片存储的位置信息
 * 备注：
 */
<template>
	<el-upload
		class="avatar-uploader"
		:list-type="uploaderStyleName"
		:action="importFileUrl"
		accept="image/jpeg,image/gif,image/png"
		:data="imgsAttrName"
		ref="uploadHandler"
		:multiple="isMultImgs"
		:show-file-list="isMultImgs"
		:before-upload="(file)=>{return beforeAvatarUpload(file,itemAttr)}"
		:on-success="(res,file,fileList)=>{return handleAvatarSuccess(res,file,fileList,itemAttr)}"
		:onError="handleAvatarError"
		:on-remove="(file,fileList)=>{return handleRemove(file,fileList,itemAttr)}"
		>
		<!--:on-change="(res,file)=>{return handleAvatarChange(res,file,columnKey)}"-->
			<i v-if="isMultImgs" class="el-icon-plus"></i>
			<i v-else>
				<img v-if="imgThumb" :src="imgThumb" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</i>
	</el-upload>
</template>

<script>
	import store from '../store'
	export default {
		name:'m-upload-img',
		props: {
// 			uploaderStyle: {  // 样式
// 				type: Object,
// 				default () {          
// 					return  {}        
// 				} 
// 			},
			imgsAttrName: { // 图片的属性命名
			  type: Object,
			  default () {          
			  	return {
						clazz:'undefined',
						columnName:'undefined'
					}       
			  } 
			},
			itemAttr: { // 图片所属的物品类别
			  type: String,
			  default: ''
			},
		    importFileUrl: { // 上传图片的服务地址
		      type: String,
		      required: false,
		      default: store.state.global.url +'/upload/image'//'https://jsonplaceholder.typicode.com/posts/'
		    },
			isMultImgs: { // 是否允许传多图片
			  type: Boolean,
			  required: false,
			  default: false
			},
	    
	  },
  data () {
    return {
			uploaderStyleName:'',
			imgThumb:'',
			uploadFilelist:[],
//     	randomId:'mychart'+ Date.now() + Math.random(),
    }
  },
	mounted() {
		if (this.isMultImgs){
			this.uploaderStyleName= 'picture-card';
		} else{
			this.uploaderStyleName= '';
		}
	},
	computed:{
	},
  methods: {
    cleanUploadFile(){
			console.log(this.$refs.uploadHandler);
			this.$refs.uploadHandler.clearFiles();
		},
		handleAvatarSuccess(response, file, fileList, columnName) {
			console.log(columnName);
			console.log(response);
			console.log(file);
			this.imgThumb = URL.createObjectURL(file.raw);
			console.log('columnName =' +columnName+', url='+this.imgThumb);
			if (response.succ === 'ok'){ 
				if (this.isMultImgs){
					this.uploadFilelist=fileList;
					this.showMultiUrl(columnName);
				} else{
					//触发response-handler方法，向父组件传递服务返回的数据
					this.$emit('response-handler', {
						"columnName":columnName,
						"res":response.result
					}); 
				}
			}
		},
		showMultiUrl(columnName){
			var urlContent='';
			for(var fileUrl of this.uploadFilelist){
				urlContent = urlContent + fileUrl.response.result +",";
			}
			urlContent = urlContent.substr(0, urlContent.length - 1);
			// this.configform[columnName] =urlContent;
			//触发response-handler方法，向父组件传递服务返回的数据
			this.$emit('response-handler', {
				"columnName":columnName,
				"res":urlContent
			}); 
		},
		handleAvatarChange(response, file, columnName){
			console.log(response);
			console.log(file);
			console.log(columnName);
		},
		handleAvatarError(response, file, fileList){
			console.log('上传失败，请重试！');
			console.log(response);
			console.log(file);
			console.log(fileList);
			this.imgsAttrName.columnName='';
		},
		beforeAvatarUpload(file, columnName) {
			this.imgsAttrName.columnName=columnName;
			return true;
//			    const isJPG = file.type === 'image/jpeg';
//				const isLt2M = file.size / 1024 / 1024 < 2;
//			
//				if (!isJPG) {
//				  this.$message.error('上传头像图片只能是 JPG 格式!');
//				}
//				if (!isLt2M) {
//				  this.$message.error('上传头像图片大小不能超过 2MB!');
//				}
//				return isJPG && isLt2M;
		},
		handleRemove(file, fileList, columnName) {
//				console.log(file, fileList);
			this.uploadFilelist = fileList;
			this.showMultiUrl(columnName);
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// .linecharts{
//     width: 100%;
// }
</style>
